コーダー必見、SCSS・Compassで開発効率アップ｜SCSS対応IE向けCSSハック編

すぐに使えるSCSS入門

#compass

#SCSS

#HTML5

#RIA

#CSS

野中龍一

2013.01.08

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

SCSS使っていますか？
とても便利なSCSSですが、大きな疑問があります。

Internet Explorer（以下IE）への対応です。
CSS3が少しずつ使えるようになってきている昨今、多くのデメリットがあるにしてもエンドユーザーにIE6利用者が多ければ対応するのが僕たちコーダーです。

SCSSだとIEハックがうまく使えないかもしれない！
という疑問を解決するために、確実に使えるハックを試しながら探してみました。

先日書いたこちらの記事も合わせてどうぞ：
【クリスマスだし】Internet Explorerとうまく付き合う方法【IE対応まとめ】【25日目の6】

サンプルファイル

サンプルファイルはこちらからダウンロードしてください。
https://github.com/nonakaryuichi/scss_css_hacks

また、動作確認用のHTMLとCSSも用意したのでIEやIETesterなどで確認してみてください。
http://nonakaryuichi.github.com/scss_css_hacks/

前提条件

まず、CSSファイルを極力軽量化するために以下の設定とします。

エクスクラメーション・マーク「!」付きのコメント以外のすべてのコメントを削除する（Environment: Production）
無駄な改行や空白を削除する（Output Style: Compressed）

SCSSのエクスクラメーション・マーク「!」付きのコメントとは

SCSSには主に3つのコメント記述方法があります。

単一行コメント
複数行コメント
エクスクラメーション・マーク「!」付きコメント

//単一行コメント

/*
複数行コメント
*/

/*!
エクスクラメーション・マーク「!」付きコメント
*/

コンパイルしてみると・・・
付けたエクスクラメーション・マーク「!」が消えていますが、コメントはしっかり残っています。

/*
エクスクラメーション・マーク「!」付きコメント
*/

注意点

エクスクラメーション・マークを付ければコメント系のハックも使える！と思ってしまいますが実は注意点があります。
コメントの場所によってエクスクラメーション・マークを付けても削除される場合があります。

valueの前のコメントはエクスクラメーションマークを付けたコメントでも削除される。
セレクタ部分に入れた場合も削除される。
propertyの後ろに入れたコメント削除されない。

それでは、実際に試した使えるCSSハックをIEのバージョン別に紹介していきます。

SCSSで使えるIE6向けCSSハック

Star Hack

/*!
 * Star Hack
 * target: IE6
 * Validator: Valid
 */
#starHack
{
	background: #ccc;
}
* html #starHack
{
	background: #cc0000;
}

UnderScore Hack

/*!
 * UnderScore Hack
 * target: IE6
 * Validator: Error
 */
#underScoreHack
{
	background: #ccc;
	_background: #cc0000;
}

Star2 Hack

/*!
 * Star2 Hack
 * target: IE6
 * Validator: Error
 */
#star2Hack
{
	background: #ccc;
}
* html*#star2Hack
{
	background: #cc0000;
}

Important Hack

/*!
 * Important Hack
 * target: IE6
 * Validator: Valid
 */
#importantHack
{
	background: #ccc!important;
	background: #cc0000;
}

The Owen Hack

/*!
 * The Owen Hack
 * target: IE6
 * Validator: Valid
 */
#theOwenHack
{
	background: #cc0000;
}
head:first-child+body #theOwenHack
{
	background: #ccc;
}

IE6 Selector Hack

/*!
 * IE6 Selector Hack
 * target: IE6
 * Validator: Valid
 */
#ie6SelectorHack
{
	background: #cc0000;
}
html>body #ie6SelectorHack
{
	background: #ccc;
}
html+body #ie6SelectorHack
{
	background: #ccc;
}

Attr Selector Hack(除外系)

/*!
 * Attr Selector Hack(Exclusion)
 * target: IE6
 * Validator: Success
 */
#attrSelectorHack
{
	background: #cc0000;
}
html[xmlns]>/**/body #attrSelectorHack
{
	background: #ccc;
}
html[lang='\ja'] #attrSelectorHack
{
	background: #ccc;
}

SCSSで使えるIE6,7向けCSSハック

Hash Hack

/*!
 * Hash Hack
 * target: IE 6,7
 * Validator: Error
 */
#hashHack
{
	background: #ccc;
	#background: #cc0000;
}

Asterisk Hack

/*!
 * Asterisk Hack
 * target: IE 6,7
 * Validator: Error
 */
#asteriskHack
{
	background: #ccc;
	*background: #cc0000;
}

IE67 Star Hack

/*!
 * IE67 Star Hack
 * target: IE 6,7
 * Validator: Error
 */
#ie67StarkHack
{
	background: #ccc;
}
html*#ie67StarHack
{
	background: #cc0000;
}

SCSSで使えるIE7向けCSSハック

Star Plus Hack

/*!
 * Star Plus Hack
 * target: IE7
 * Validator: Valid
 */
#starPlusHack
{
	background: #ccc;
}
*+html #starPlusHack
{
	background: #cc0000;
}

IE7 Star Hack

/*!
 * IE7 Star Hack
 * target: IE7
 * Validator: Valid
 */
#ie7StarHack
{
	background: #ccc;
}
*:first-child+html #ie7StarHack
{
	background: #cc0000;
}

SCSSで使えるIE6,7,8向けCSSハック

Selector Hack(除外系)

/*!
 * Selector Hack(Exclusion)
 * target: IE6,7,8
 * Validator: Valid
 */
#selectorHack
{
	background: #cc0000;
}
:root #selectorHack
{
	background: #ccc;
}

SCSSで使えるIE6,7,8,9向けCSSハック

BackSlash 9 Hack

/*!
 * BackSlash 9 Hack
 * target: IE6,7,8,9
 * Validator:
 */
#backslash9Hack
{
	background: #ccc;
	background: #cc0000\9;
}

SCSSで使えるIE9向けCSSハック

IE9 BackSlash 9 Hack

/*!
 * IE9 BackSlash 9 Hack
 * target: IE9
 * Validator:
 */
#ie9Backslash9Hack
{
	background: #ccc;
}
:not(:target) #ie9Backslash9Hack
{
	background: #cc0000\9;
}